<template>
  <div class="product-attr-range-layout">
    <div class="operate">
      <el-button type="primary" @click="handleCreateRange()" size="small">新 建</el-button>
    </div>
    <el-table :data="list" v-loading="listLoading" border size="small" height="282px">
      <el-table-column label="属性值" width="160">
        <template slot-scope="scope">{{scope.row.rangeValue}}</template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">{{scope.row.remarks}}</template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">{{scope.row.status}}</template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="operate-button">
      <el-button @click="handleClose" size="small">关 闭</el-button>
    </div>
    <el-dialog
      title="新建产品值"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      class="form-dialog"
    >
      <hcbk-create-product-attr-range
        v-if="dialogVisible"
        :code="code"
        @after-create="handleAfterCreate"
      ></hcbk-create-product-attr-range>
    </el-dialog>
  </div>
</template>
<script>
import { getProductAttrRangeList } from "@/api/product";
import CreateProductAttrRange from "./createProductAttrRange.vue";
export default {
  name: "ProductAttrRange",
  components: {
    HcbkCreateProductAttrRange: CreateProductAttrRange
  },
  props: {
    code: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      dialogVisible: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      if (!this.code) {
        return;
      }
      this.listLoading = true;
      getProductAttrRangeList(this.code).then(response => {
        this.listLoading = false;
        this.list = response.data;
      });
    },
    handleClose() {
      this.$emit("after-edit", false);
    },
    handleCreateRange() {
      this.dialogVisible = true;
    },
    handleAfterCreate(result) {
      this.dialogVisible = false;
      if (result) {
        this.getList();
      }
    },
    handleDelete() {}
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.product-attr-range-layout {
  .operate {
    margin-bottom: 12px;
    margin-top: -18px;
  }
  .operate-button {
    text-align: center;
    margin-top: 12px;
  }
}
.form-dialog /deep/ .el-dialog__body {
  padding: 18px;
}
</style>


